<template>
   <div>
     <!--      面包屑导航-->
<!--     <el-breadcrumb separator-class="el-icon-arrow-right">-->
<!--       <el-breadcrumb-item :to="{ path: '/rights' }">首页</el-breadcrumb-item>-->
<!--       <el-breadcrumb-item>权限管理</el-breadcrumb-item>-->
<!--       <el-breadcrumb-item>权限列表</el-breadcrumb-item>-->
<!--     </el-breadcrumb>-->
     <bread-list :navData = "navData"></bread-list>
<!--     卡片视图-->
     <el-card>
<!--         权限表格-->


       <el-table
           stripe
           border
           height="520"
           :data="rightsList">
         <el-table-column align="center" label="#" type="index"  ></el-table-column>
         <el-table-column align="center" prop="authName" label="权限名称" ></el-table-column>
         <el-table-column align="center" prop="path" label="路径" ></el-table-column>
         <el-table-column align="center" prop="level" label="权限等级" >
           <template slot-scope="scope">
             <el-tag v-show="scope.row.level === '0'">一级</el-tag>
             <el-tag v-show="scope.row.level === '1'" type="success">二级</el-tag>
             <el-tag v-show="scope.row.level === '2'" type="warning">三级</el-tag>
           </template>
         </el-table-column>
       </el-table>
     </el-card>

   </div>
</template>

<script>
import BreadList from "../common/BreadList";
export default {
  name: "Rights",
  components:{
    BreadList
  },
  data(){
    return{
      rightsList:[],
      navData:{
        navNameFir:'权限管理',
        navSecond:'权限列表',
        path:'/home'
      },
    }
  },
  mounted() {
    this.getRightsList()
  },
  methods:{
    // 获取权限列表数据
    async getRightsList(){
      const {data:res} = await this.$http.get('rights/list')
      const { meta:meta } = res
      if(meta.status === 200){
        this.rightsList = res.data
        this.$message.success(meta.msg)
      }else {
        this.$message.error(meta.msg)
      }
      // console.log(res);
    }
  }
}
</script>

<style scoped lang="less">

</style>